import React from "react";
import request from '../../utils/request';
// import Route from "react-route"
import { Button, Form, Input,Row,Col } from 'antd';

import { useNavigate, Link } from "react-router-dom";
import "./Reg.less";

function Reg() {
  const  navigate = useNavigate()
  const onFinish = (values) => {
      console.log(values);
      
      request.post('user/reg',{
          username: values.username,
          password: values.password
      }).then(function({data}){
        console.log(data)
          if(data.code===200){
              navigate('/index/mine')
          }  
      })
       
  };

  const checkIn =()=>{

  }
  return (
    <>
    <Row>
    <Col style={{ backgroundColor: 'rgb(255, 118, 32)', width: '100%', height: '200px' }}>
    </Col>
    </Row>
    <Form style={{ marginTop: 20, width: '100%' ,height: '100%'}}
    name="basic"
    labelCol={{ span: 6, }}
    wrapperCol={{ span: 14 }}
    initialValues={{ remember: true, }}
    onFinish={onFinish}
    autoComplete="off"
  >
    <div style={{paddingTop:'20px'}}>
    <Form.Item label="用户名" name="username"
      rules={[
        {
          required: true,
          message: '请填写用户名',
        },
        { 
          // 自定义校验规则，校验用户名是否被占用（返回一个promise对象）
          validator: (rule, value) => {
              if(!value){
                return Promise.reject()
              }
              return new Promise((resolve, reject) => {
                // 验证用户名是否被注册 /user/check 参数：username
                  request.get('/user/check?username='+value).then(function ({data}) { 
                    if (data.code === 200) {
                      resolve()
                    } else if (data.code === 400){
                      reject('用户名已被注册')  
                    }                                       
                  })
              })
          },
        }
      ]}
    >
      <Input />
    </Form.Item>

    <Form.Item label="密码" name="password"
      rules={[
        {
          required: true,
          message: '请填写密码',
        },
      ]}
    >
      <Input.Password />
    </Form.Item>

    </div>

    <Form.Item
      wrapperCol={{
        offset: 12,
        span: 16,
      }}
    >
      <Button type="primary" htmlType="submit" style={{}}>注册</Button>
    </Form.Item>
  </Form>
    </>
  );
}
export default Reg;
